<template>
  <div class="daybox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="formdata.companyId"
                      :optionlist="xitonglist"
                      @changeSelect="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="日期">
                      <el-date-picker
                        size="small"
                        style="width:100%"
                        v-model="formdata.yearMonth"
                        format="yyyy-MM"
                        value-format="yyyyMM"
                        type="month">
                      </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="getlist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <TopTitle @command="command" @daochu="daochu" @shuaxin="getlist" />
      <div class="table">
        <el-table
          :size="iissize"
          border
          :header-cell-style="{ 'text-align': 'center', background: '#f5f5f5' }"
          v-loading="loading"
          height="calc(100% - 1px)"
          style="width: 100%"
          ref="tabledataref"
          :data="tableData"
        > 
          <el-table-column label="序号" type="index" fixed width="70" />
          <el-table-column label="企业" prop="companyName" fixed min-width="120"/>
            <el-table-column v-for="col in tableConfig" 
              :key="col.prop"  
              :label="col.label"  width="100" >
              <template #default="{ row }">
                <div class="colum" @click="tohour(row,col.label)">
                  <el-tooltip placement="top">
                    <template #content>
                      <div>预算电量(kWh)</div>
                      <!-- 显示预算电量 -->
                      <div>{{ row.hourDataObj[col.prop].budgetEnergy }}</div>
                    </template>
                    <!-- 显示实际电量，并根据超额标识设置颜色 -->
                    <div :style="{color: row.hourDataObj[col.prop].excessFlag ? 'red' : 'green'}">
                      {{ row.hourDataObj[col.prop].actualEnergy }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          <!-- <el-table-column label="操作" min-width="120" fixed="right">
            <template #default="{ row }">
              <div>
                <el-link type="primary" :underline="false" @click="tohour(row)" class="link">日超额情况</el-link>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getlist"
            :page-size="15"
            :total="total"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import TableColumn from '@/components/Table/index.vue'
import dayjs from 'dayjs'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import TopTooltip from '@/components/TopTitle/newtitle.vue'
import { exportexcel } from '@/utils/excel'
import {getDayPageapi} from '@/api/energy-consumption/demand/limit-warning'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      pageNo:0,
      total:0,
      formdata:{},
      loading:false,
      iissize: 'medium',
      xitonglist:[],
      tableData:[],
      tableConfig:[],
    };
  },

  async mounted() {
    const { data: { list } } = await getCompanyListApi()
    this.xitonglist = list
    this.formdata={yearMonth:dayjs().format('YYYYMM')}
    const companyId = localStorage.getItem('companyId')
    this.$set(this.formdata,'companyId',companyId?+companyId:list[0].id)
    this.getlist()
  },

  methods: {
    async getlist(){
      this.loading=true
      const pageNo=this.pageNo-1
      const {data:{list,totalCount}}=await getDayPageapi({pageNo,pageSize:15,...this.formdata})
      this.total=totalCount
      this.tableConfig=[]
      this.tableConfig = list[0]?.dayDataList?.map(hourItem => {
        return {
          label: hourItem.day,
          prop: hourItem.day
        };
      });
      this.tableData = list.map(company => {
        const hourDataObj = company.dayDataList?.reduce((acc, hourItem) => {
          acc[hourItem.day] = hourItem;
          return acc;
        }, {});
        return {
          ...company,
          hourDataObj 
        };
      });
      this.$nextTick(()=>{
        this.$refs.tabledataref.doLayout()
      })
      this.loading=false
    },
    tohour(row,day){
      this.$router.push({
        name: 'day-day',
        // 通过 meta 传递对象（无需序列化）
        params: {...row,day}
      })
    },
    changeqiye(val){
      localStorage.setItem('companyId', val)
    },
    daochu(){
      const pageNo=this.pageNo-1
      exportexcel(
        '/ecm-microservice-biz/ecm/pre/actual/management/day/exportExcel',
        {pageNo,pageSize:15,...this.formdata},'日超额预警'
      )
    },
    chongzhi(){
        this.formdata={yearMonth:dayjs().format('YYYYMM')}
        const companyId = localStorage.getItem('companyId')
        this.$set(this.formdata,'companyId',companyId?+companyId:this.xitonglist[0].id)
        this.getlist()
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
  },
  activated() {
    this.$refs.simpleTable.doLayout()
  }
};
</script>
<style lang="scss" scoped>
.daybox{
  height: 100%;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .table{
      height: 88%;
      ::v-deep .cell{
        height: 100%;
      }
      .colum{
        cursor: pointer;
      }
      .link{
        margin-right: 10px;
      }
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}

</style>